<template>
	<view>
		<view class="outer" :style="{zIndex:zIndex}">
			<view class="inner" :style="{zIndex:zIndex}">
				<view class="battery" :class="ElectricQuantity > 20 ?'':'Weakcell'" :style="{borderColor:colors,zIndex:zIndex}">
					<view class="power-box">
						<view class="power" :style="{width:num+'%',backgroundColor:colors,zIndex:zIndex}"></view>
					</view>
				</view>
			</view>
			<text v-if='isElectric' class="leftText" :style="{color:colors,zIndex:zIndex}">{{ElectricQuantity}}%</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			ElectricQuantity: {
				type: Number,
				default: 100
			},
			isElectric: {
				type: Boolean,
				default: false
			},
			zIndex:{
				type: Number,
				default: 999
			}
		},
		data() {
			return {
				colors: this.colorbg(),
				num: this.ElectricQuantity
			};
		},
		mounted() {
			// console.log(this.ElectricQuantity, this.num)
		},
		watch:{
			ElectricQuantity(newValue,oldValue){
				this.num = newValue
				this.colors = this.colorbg()
			}
		},
		methods: {
			colorbg() {
				if (this.ElectricQuantity > 20) {
					return '#FF0025'
				} else {
					return '#FF5800'
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.outer {
		display: flex;
		align-items: center;
		height: 100%;
		width: 100%;
		// z-index: 999;
	}

	.leftText {
		margin-left: 12rpx;
		font-size: 20rpx;
		font-weight: 600;
		// z-index: 999;
	}

	.inner {
		text-align: center;
		// z-index: 999;
	}

	.battery {
		position: relative;
		height: 18rpx;
		width: 44rpx;
		// z-index: 999;
		border: 2rpx solid;
		border-radius: 4rpx;
		box-sizing: content-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.battery:after {
		content: "";
		position: absolute;
		top: calc(50% - 5rpx);
		right: -6rpx;
		height: 10rpx;
		width: 3rpx;
		border-radius: 0 1rpx 1rpx 0;
		background-color: #FF0025;
	}

	.Weakcell:after {
		content: "";
		position: absolute;
		top: calc(50% - 5rpx);
		right: -6rpx;
		height: 10rpx;
		width: 3rpx;
		border-radius: 0 1rpx 1rpx 0;
		background-color: #FF5800;
	}

	.power-box {
		width: 42rpx;
		height: 16rpx;
		border-radius: 2rpx;
		overflow: hidden;
	}

	.power {
		height: 100%;
		// z-index: 999;
	}
</style>
